<template>
    <div class="paikebiao">
        <el-table
                border
                :data="tableData"
                :max-height="maxheight"
                :height="height"
                style="width: 100%;">
            <el-table-column
                    prop="data"
                    label="日期"
                    align="center"
                    width="120">
            </el-table-column>
            <el-table-column
                    v-for="(item,index) in listdata" :key="index"
                    :label="item"
                    align="center">
                <template slot-scope="scope">
                    <!--                    {{scope.row.courseId}}-->
                    <!--                    "(el)=>tableselect(el,item2.id)"-->
                    <el-input v-if="type==0" @change="(el)=>tableselect(el,item,tableData[scope.$index].start)"
                              v-model="tableData[scope.$index][item]"></el-input>
                    <span v-else>{{tableData[scope.$index][item]}}</span>
                </template>
            </el-table-column>

        </el-table>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import Wang from 'wangeditor'
    import {baseImgPath, basefile, imgupload, videoupload} from '@/config/env.js';

    // 时间戳格式化
    function formatDate(timeStamp, type = 'Y-M-D H:I:S', auto = false) {
        let time = (timeStamp + '').length === 10 ? new Date(parseInt(timeStamp) * 1000) : new Date(parseInt(timeStamp));
        let _year = time.getFullYear();
        let _month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1);
        let _date = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
        let _hours = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
        let _minutes = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
        let _secconds = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
        let formatTime = '';
        let distinctTime = new Date().getTime() - time.getTime();

        if (auto) {
            if (distinctTime <= (1 * 60 * 1000)) {
                // console.log('一分钟以内，以秒数计算');
                let _s = Math.floor((distinctTime / 1000) % 60);
                formatTime = _s + '秒前';
            } else if (distinctTime <= (1 * 3600 * 1000)) {
                // console.log('一小时以内,以分钟计算');
                let _m = Math.floor((distinctTime / (60 * 1000)) % 60);
                formatTime = _m + '分钟前';
            } else if (distinctTime <= (24 * 3600 * 1000)) {
                // console.log('一天以内，以小时计算');
                let _h = Math.floor((distinctTime / (60 * 60 * 1000)) % 24);
                formatTime = _h + '小时前';
            } else if (distinctTime <= (30 * 24 * 3600 * 1000)) {
                let _d = Math.floor((distinctTime / (24 * 60 * 60 * 1000)) % 30);
                formatTime = _d + '天前';
                // console.log('30天以内,以天数计算');
            } else {
                // 30天以外只显示年月日
                formatTime = _year + '-' + _month + '-' + _date;
            }
        } else {

            switch (type) {
                case 'Y-M-D H:I:S':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
                case 'Y-M-D H:I:S zh':
                    formatTime = _year + '年' + _month + '月' + _date + '日  ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
                case 'Y-M-D H:I':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes;
                    break;
                case 'Y-M-D H':
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours;
                    break;
                case 'Y-M-D':
                    formatTime = _year + '-' + _month + '-' + _date;
                    break;
                case 'Y-M-D zh':
                    formatTime = _year + '年' + _month + '月' + _date + '日';
                    break;
                case 'Y-M':
                    formatTime = _year + '-' + _month;
                    break;
                case 'Y':
                    formatTime = _year;
                    break;
                case 'M':
                    formatTime = _month;
                    break;
                case 'D':
                    formatTime = _date;
                    break;
                case 'H':
                    formatTime = _hours;
                    break;
                case 'I':
                    formatTime = _minutes;
                    break;
                case 'S':
                    formatTime = _secconds;
                    break;
                default:
                    formatTime = _year + '-' + _month + '-' + _date + ' ' + _hours + ':' + _minutes + ':' + _secconds;
                    break;
            }
        }
        // 返回格式化的日期字符串
        return formatTime;
    }

    export default {
        data() {
            return {
                listdata: [],
                optionsKC: [],
                detailForm: {},
                editor: null,
                value1: '',
                times: [],
                tableData: [
                    {
                        start: '09:00',
                        end: '10:00',
                        data: '9:00-10:00'
                    }, {
                        start: '10:00',
                        end: '11:00',
                        data: '10:00-11:00'
                    }, {
                        start: '11:00',
                        end: '12:00',
                        data: '11:00-12:00'
                    }, {
                        start: '14:00',
                        end: '15:00',
                        data: '14:00-15:00'
                    }, {
                        start: '15:00',
                        end: '16:00',
                        data: '15:00-16:00'
                    }, {
                        start: '16:00',
                        end: '17:00',
                        data: '16:00-17:00'
                    }, {
                        start: '17:00',
                        end: '18:00',
                        data: '17:00-18:00'
                    }],
                paike: []
            }
        },
        props: {
            startTime: {
                default: ''
            },
            endTime: {
                default: ''
            }, maxheight: {
                default: '500'
            }, height: {
                default: '500'
            }, id: {
                default: 0
            }, type: {
                default: 0
            },
        },
        computed: {},

        methods: {
            ...mapActions('coachTraining', [
                'getPaike',
                'addPaike',

            ]),
            // 保存排课
            savepaike() {
                var that = this;
                this.addPaike(this.times).then(res => {
                    const {code} = res
                    if (code === 200) {
                        // this.paike = list || []
                        this.$message({
                            message: '课程更新成功',
                            type: 'success'
                        })
                    }
                })

            },
            // 单元格选中
            tableselect(input, date, start) {
                console.log("=============");
                console.log(input, date, start);
                console.log("=============");
                var that = this;
                var data = this.listdata
                var data2 = this.tableData
                var data3 = []
                for (var i = 0; i < data.length; i++) {
                    for (var s = 0; s < data2.length; s++) {
                        var data4 = {}
                        if (data2[s][data[i]]) {
                            data4.startTime = this.strtotime(data[i], data2[s].start)
                            data4.endTime = this.strtotime(data[i], data2[s].end)
                            data4.name = data2[s][data[i]]
                            data4.reason = ''
                            if (that.id && start == data2[s].start && date == data[i] && input == data4.name) {
                                data4.courseId = Number(that.id)
                                console.log(Number(that.id), '有更新内容');
                            } else {
                                data4.courseId = data2[s].courseId
                                console.log(data2[s].courseId, '无更新内容');
                            }
                            data4.coachId = sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0
                            data3.push(data4)
                        }
                    }
                }
                this.times = data3
                this.savepaike()
            },
            // 时间日期拼接处理
            strtotime(data, time) {
                var times = data + ' ' + time + ':00'
                return new Date(times)

            },
            // 日期列表选择日期后获取列表
            // 获取排课内容
            getPaikes() {
                this.getPaike({
                    "coachId": sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0,
                    "startTime": this.startTime,
                    "endTime": this.endTime
                }).then(res => {
                    const {code, data: {list}} = res
                    if (code === 200) {
                        this.paike = res.data
                        this.getpaike2()
                    }
                })
            },
            // 排课内容处理
            getpaike2() {
                var that = this;
                var data = this.tableData
                this.listdata = []
                var data2 = []
                var paikeshuju = this.paike
                for (var s = 0; s < data.length; s++) {
                    var data3 = {}
                    for (var i = Date.parse(this.startTime);
                         i <= Date.parse(this.endTime);
                         i += 86400000) {
                        if (s == 0) {
                            var shuju = {}
                            shuju = formatDate(i, 'Y-M-D')
                            this.listdata.push(shuju)
                        }
                        var value = '';
                        var courseId = Number(that.id);
                        var key = formatDate(i, 'Y-M-D');
                        // 与接口获取的数据进行对比
                        var start = this.strtotime(key, data[s].start).getTime()
                        for (var x = 0; x < paikeshuju.length; x++) {
                            for (var y = 0; y < paikeshuju[x].day.length; y++) {
                                if (start == paikeshuju[x].day[y].startTime) {
                                    value = paikeshuju[x].day[y].name;
                                    courseId = paikeshuju[x].day[y].courseId;
                                    console.log(paikeshuju[x].day[y].courseId);
                                    console.log("有内容获取");
                                    data3.courseId = courseId
                                }
                            }
                        }
                        data3[key] = value;

                    }
                    data3.start = data[s].start
                    data3.end = data[s].end
                    data3.data = data[s].data
                    data2.push(data3)
                }
                this.tableData = data2

            },

        },

        created() {
            this.getPaikes()
        },

        filters: {},
        watch: {
            startTime(newValue, oldValue) {
                this.getPaikes()
            },
            endTime(newValue, oldValue) {
                this.getPaikes()
            },
        }
    }
</script>

<style scoped>
    .table .title {
        display: flex;
    }

    .df {
        display: flex;
        background: none;
    }

    .liStyle {
        border: 1px solid;
        width: 120px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

    .wode {
        position: relative;
        z-index: 1;
    }

    .uploadimg2 {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;

    }

    .uploadimg2 img {
        margin-right: 20px;
    }

    .hezuohb {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .paikebiao {
        margin-top: 20px;
        margin-bottom: 30px;
    }
</style>




